<template>
  <div class="layout-container compute-atlas">
    <FlowStep :activeStep="2" />
    <TagIcon title="性能偏差计算推算图谱" :style="tagIconStyle" />
    <!-- <div>点击节点进入推算结果展示页面</div> -->
    <div class="layout-container-table center">
      <FlowChart :sampleId="route.query.sampleId" :hisSampleId="route.query.hisSampleId" :deviationFuseResult="route.query.deviationFuseResult"/>
    </div>
    <div class="step-buttons common-buttons">
      <el-button type="primary" @click="onBack">上一步</el-button>
      <el-button type="primary" @click="onStep">下一步</el-button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import TagIcon from '@/components/tag-icon/index.vue';
import { httpResultVisiualDisplayList } from '@/api/similarityEvaluationSystem';
import FlowStep from '../../FlowStep/index.vue';
import FlowChart from './FlowChart.vue'

let $router = useRouter();
const route = useRoute();
const tagIconStyle = reactive({ padding: '16px' });

const onBack = () => {
  $router.push({
    path: '/antiJamPerformCalculateSystem/fuseCalculate',
    query: {
      sampleId: route.query.sampleId,
      sampleName: route.query.sampleName
    },
  });
};

// 进入推算结果页面
const onStep = () => {
  $router.push({
    path: '/antiJamPerformCalculateSystem/performanceCalculateResult',
    query: {
      hisSampleId: route.query.hisSampleId,
      sampleId: route.query.sampleId,
      sampleName: route.query.sampleName,
      deviationFuseResult: route.query.deviationFuseResult
    },
  });
};
</script>

<style lang="scss" scoped>
@import '@/assets/style/buttons';
.compute-atlas {
  .step-buttons {
    display: flex;
    justify-content: center;
    box-shadow: 0px 0px 10px rgba(218, 222, 224, 1);
    padding: 10px 0;
  }
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
}
}
.el-button {
    background: rgb(1, 18, 90);
    border: 0;
  }
</style>
